<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>add Emp</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css"
			href="css/style.css" />
	</head>

	<body>
		<div id="wrap">
			<div id="top_content">
				<div id="header">
					<div id="rightheader">
						<p>
							2009/11/20
							<br />
							<!--这是什么意思？-->
							<a href="javascript:;"  @click="logout">安全退出</a>
						</p>
					</div>
					<div id="topheader">
						<h1 id="title">
							<a href="/ems_vue/emplist.html">main</a>
						</h1>
					</div>
					<div id="navigation">
					</div>
				</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						add Emp info:
					</h1>
					<form action="emplist.html" method="post">
						<table cellpadding="0" cellspacing="0" border="0"
							class="form_table">
							<tr>
								<td valign="middle" align="right">
									name:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" v-model="emp.name" name="name" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									photo:
								</td>
								<td valign="middle" align="left">
									<!--在文件中想要实现文件上传，需要给文件绑定ref属性-->
									<input type="file" ref="myPhoto" name="photo" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									salary:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="salary" v-model="emp.salary" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									age:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="age" v-model="emp.age" />
								</td>
							</tr>
						</table>
						<p>
							<input type="button" @click="tijiao" class="button" value="Confirm" />
						</p>
					</form>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
					ABC@126.com
				</div>
			</div>
		</div>
	</body>
</html>

<script src="/ems_vue/js/vue.js"></script>
<script src="/ems_vue/js/axios.min.js"></script>
<script>
	var app = new Vue({
		el: "#wrap",
		data: {
			user:{},
			emp:[],
		},
		methods: {
			logout(){
				localStorage.removeItem("user");
				location.reload(true);
			},
			tijiao(){
				console.log(this.emp);
				console.log(this.$refs.myPhoto.files[0]);//获取文件信息

				var formData = new FormData();
				formData.append("name",this.emp.name);
				formData.append("salary",this.emp.salary);
				formData.append("age",this.emp.age);
				formData.append("photo",this.$refs.myPhoto.files[0]);
				// 文件上传必须post
				//enctype必须是multipart/form-data
				var _this = this;
				axios({
					method:"post",
					url:"http://localhost:8998/ems_vue/emp/save",
					data:formData,
					headers:{
						'content-type':'multipart/form-data'
					}
				}).then(function (res) {
					console.log(res.data.state);
					if (res.data.state) {

						if(window.confirm(res.data.msg+",点击确定跳转到列表页面")){

							location.href="/ems_vue/emplist.html";


						} else {
							_this.emp={};
						}
					} else {
						alert(res.data.msg)
					}
				})
			}

		},
		created() {
			var userString=localStorage.getItem("user");
			console.log(userString+"1");
			if (userString){
				console.log(userString+"2");
				this.user = JSON.parse(userString);
			} else{
				alert("您尚未登录，点击确定登录");
				location.href="/ems_vue/login.html";
			}


		}


	})


</script>
